<template>
  <div class="wrap">
    <Header :title="'新闻列表'" />
    <div id="slider" class="mui-slider">
      <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <div class="mui-scroll" style="transform: translate3d(0px, 0px, 0px) translateZ(0px); transition-duration: 0ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);">
          <a :class="['mui-control-item',item.id == 1?'mui-active':'']" href="#item1mobile" data-wid="tab-top-subpage-1.html"
            v-for="item in list" :key="item.id">
            {{item.title}}
          </a>

        </div>
      </div>

    </div>
    <div class="pic_list">
      <div class="pic" v-for="item in pic_list" :key="item.id" @click="photoinfo(item.id)">
        <img alt="" v-lazy="item.img_url">
        <p class="text">{{item.description}}</p>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <Tabbar />
  </div>
</template>
<script>
  import Header from "../comments/header.vue";
  import Tabbar from "../comments/tabbar.vue";
  import mui from "../../lib/mui/js/mui.min.js";
  import {
    Toast
  } from "mint-ui";
  export default {
    data() {
      return {
        list: [{
            id: 1,
            title: "全部"
          },
          {
            id: 2,
            title: "美术"
          },
          {
            id: 3,
            title: "游泳"
          },
          {
            id: 4,
            title: "健身"
          },
          {
            id: 5,
            title: "乒乓球"
          },
          {
            id: 6,
            title: "篮球"
          },
          {
            id: 7,
            title: "足球"
          },
          {
            id: 8,
            title: "吃饭"
          }
        ],
        getlist: [],
        pic_list: [{
            id: 1,
            img_url: "../../images/8.jpg",
            description: "莎士比亚说: 再好的东西都有失去的一天。再深的记忆也有淡忘的一天。再爱的人，也有远走的一天。再美的梦也有苏醒的一天。该放弃的决不挽留。该珍惜的决不放手，分手后不可以做朋友，因为彼此伤害过！也不可以做敌人，因为彼此深爱"
          },
          {
            id: 2,
            img_url: "../../images/55st.png",
            description: "刘心武说: 不要指望，麻雀会飞得很高。高处的天空，那是鹰的领地。麻雀如果摆正了自己的位置，它照样会过得很幸福！"
          },
          {
            id: 3,
            img_url: "../../images/56st.png",
            description: "。亦舒说: 人们日常所犯最大的错误，是对陌生人太客气，而对亲密的人太苛刻，把这个坏习惯改过来，天下太平。"
          }
        ]
      };
    },
    created() {
      this.getAllCategory();
    },
    mounted() {
      //当组件中的dom结构被渲染好并放到页面中，会执行这个钩子函数
      mui(".mui-scroll-wrapper").scroll({});
    },
    methods: {
      //获取所有图片分类
      getAllCategory() {
        this.$http.get("url").then(
          res => {
            console.log(res);
            if (res.data.code == "200") {
              this.getlist = res.data.list;
            } else {
              console.log(res.data.msg);
            }
          },
          err => {
            //   Toast("获取分类列表失败！");
          }
        );
      },
      //跳转图片详情页面
      photoinfo(id) {
        this.$router.push('/record/weight/photoinfo/' + id)
      }
    },
    components: {
      Header: Header,
      Tabbar: Tabbar
    }
  };
</script>
<style scoped lang="scss">
  .wrap {
    height: 100%;
  }

  * {
    touch-action: pan-y;
  }

  .mui-slider {
    background-color: #fff;
  }

  .pic {
    position: relative;
    margin-top: 5px;
    text-align: center;

    .text {
      width: 100%;
      position: absolute;
      bottom: 5px;
      /* padding: 5px; */
      background-color: rgba(0, 0, 0, 0.2);
      color: #ffffffa8;
      font-size: 12px;
      padding-left: 10px;
      text-align: left;
      max-height: 60px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }

  .pic img {
    width: 100%;
  }

  .pic_list {
    margin-bottom: 50px;
  }

  img[lazy="loading"] {
    width: 40px;
    height: 300px;
    margin: auto;
  }
</style>